<template>
  <div class="dialog__body">
    <el-form ref="codeCutFormRef" :model="form" :rules="form.rules">
      <el-table
        class="table border-table"
        :data="form.tableData"
        style="width: 100%"
        ref="multipleTable"
      >
        <!-- :span-method="objectSpanMethod" -->
        <el-table-column type="expand">
          <template #default="props">
            <div m="4">
              <el-table :data="props.row.children" :border="childBorder">
                <el-table-column label="名称" prop="name" />
                <el-table-column label="参数" prop="parameters" />
                <el-table-column label="占比" prop="rate" />
              </el-table>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="fileName" label="文件名称"> </el-table-column>
        <el-table-column prop="createTime" label="创建时间"> </el-table-column>
        <el-table-column prop="createTime" label="操作">
          <template slot-scope="scope">
            <mine-button
              size="mini"
              type="text"
              @click="downloadFile(scope.row)"
              >下载</mine-button
            >
          </template>
        </el-table-column>
      </el-table>
      <mine-pagination
        @numberChange="historyNumberChange"
        :total="historyTotal"
        :page-size="historyPageSize"
        :current-page="historyCurrentPage"
      >
      </mine-pagination>
      <div class="footer-bottom">
        <!-- <el-button type="primary" size="small" @click="handleConfirm"
          >确定</el-button
        > -->
        <el-button type="primary" size="small" @click="handleCancel"
          >取消</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script>
import qs from "qs";
import { QWebChannel } from "@/modules/index/utils/qwebchannel.js";

export default {
  components: {},
  name: "TestResult",
  props: {
    rowData: {
      type: Object,
    },
  },
  data() {
    return {
      form: {
        tableData: [],
        rules: {
          rate: [{ required: true, message: "请输入" }],
          id: [{ required: true, message: "请选择" }],
        },
      },
      historyTotal: 0,
      historyPageSize: 10,
      historyCurrentPage: 1,
    };
  },
  computed: {
    tableHeight: function () {
      return 0.5 * window.innerHeight + "px";
    },
  },
  methods: {
    async downloadFile(val) {
      this.$set(val, "loading", true);
      try {
        let res = {};
        let _self = this;
        if (_self.$qwebUtil.isQtClient) {
          const uuid = _self.$qwebUtil.generateRandomUUID();
          let sendObject;
          /* eslint-disable-next-line */
          const channel = new QWebChannel(
            window.qt.webChannelTransport,
            async function (channel) {
              sendObject = channel.objects.sendObject;
              // receivedJSON 修改此处发送请求参数
              const receivedJSON = {
                RequestUrl: `/algoClipRecord/download?id=${val.id}`,
                RequestMethod: "post",
                ContentType: "application/json;charset=UTF-8",
                RequestBody: {},
                isStringParam: false,
                requestId: uuid,
              };
              await _self.$qwebUtil.receive(sendObject, receivedJSON);
              // console.error('received','/feCanvas/pageList')
              // await send();
            }
          );
        } else if (this.$webview2.isWPF) {
          const uuid = this.$webview2.generateRandomUUID();
          await this.$webview2.sendWebView2(
            `/algoClipRecord/download?id=${val.id}`,
            "post",
            "application/json;charset=UTF-8",
            {},
            false,
            uuid
          );
        } else {
          await this.$store.dispatch("historyDownloadFile", {
            id: val.id,
          });
        }
      } catch (e) {
        console.error(e);
      }
      this.$set(val, "loading", false);
    },
    historyNumberChange(val) {
      switch (val.flag) {
        case "pageSize":
          this.historyPageSize = val.pageSize;
          this.getHistoryVersionTable(true);
          break;
        case "currentPage":
          this.historyCurrentPage = val.currentPage;
          this.getHistoryVersionTable(false);
          break;
        default:
          break;
      }
    },
    async handleConfirm() {},
    handleCancel() {
      this.$emit("changeFlag");
    },
    async getHistoryVersionTable() {
      let res = {};
      let _self = this;
      if (_self.$qwebUtil.isQtClient) {
        const uuid = _self.$qwebUtil.generateRandomUUID();
        let sendObject;
        /* eslint-disable-next-line */
        const channel = new QWebChannel(
          window.qt.webChannelTransport,
          async function (channel) {
            sendObject = channel.objects.sendObject;
            // receivedJSON 修改此处发送请求参数
            const receivedJSON = {
              RequestUrl: `/algoClipRecord/pageList?${qs.stringify({
                templateId: _self.rowData.id,
                pageSize: _self.historyPageSize,
                page: _self.historyCurrentPage,
              })}`,
              RequestMethod: "get",
              ContentType: "application/json;charset=UTF-8",
              RequestBody: {},
              isStringParam: false,
              requestId: uuid,
            };
            await send();
            await _self.$qwebUtil.receive(sendObject, receivedJSON);
            /* eslint-disable-next-line */
            async function send() {
              sendObject.sendMessage.connect(function (data) {
                if (!data) {
                  console.error("No data received.");
                }
                res = JSON.parse(data);
                const result = res.response || {};
                // update the followings
                if (result.success && res.webInfo.requestId == uuid) {
                  _self.historyTotal = result.data?.rowCount;
                  _self.historyPageSize = result.data?.pageSize;
                  _self.historyCurrentPage = result.data?.page;

                  _self.form.tableData = result.data.list;
                }
              });
            }
          }
        );
      } else if (this.$webview2.isWPF) {
        const uuid = this.$webview2.generateRandomUUID();
        await this.$webview2.sendWebView2(
          `/algoClipRecord/pageList`,
          "get",
          "application/json;charset=UTF-8",
          qs.stringify(
            {
              templateId: this.rowData.id,
              pageSize: this.historyPageSize,
              page: this.historyCurrentPage,
            },
            { indices: false }
          ),
          true,
          uuid
        );
        await window.chrome.webview.addEventListener(
          "message",
          (e) => {
            let res = e.data.response;
            // TODO： 定制后台数据处理
            if (res.status === 200 && e.data.webInfo.requestId === uuid) {
              this.historyTotal = res.data?.rowCount;
              this.historyPageSize = res.data?.pageSize;
              this.historyCurrentPage = res.data?.page;

              this.form.tableData = res.data.list;
            }
          },
          { once: true }
        );
      } else {
        const res = await this.$store.dispatch("getHistoryVersionTable", {
          templateId: this.rowData.id,
          pageSize: this.historyPageSize,
          page: this.historyCurrentPage,
        });
        if (res.data.status === 200) {
          this.historyTotal = res.data.data?.rowCount;
          this.historyPageSize = res.data.data?.pageSize;
          this.historyCurrentPage = res.data.data?.page;

          this.form.tableData = res.data.data.list;
        }
      }
    },
  },
  created() {
    this.getHistoryVersionTable();
  },
};
</script>

<style scoped lang="less">
.title {
  display: flex;
  justify-content: space-between;
  padding-left: 20px;
  font-size: 18px;
  font-weight: 700;
  height: 30px;
  line-height: 30px;
  .resultDesc {
    white-space: nowrap;
    overflow: hidden;
    width: 480px;
    text-overflow: ellipsis;
  }
  .run-result {
    display: flex;
  }
  .model-button-group {
    display: flex;
    div {
      margin: 0px 5px;
    }
    .iconfont:hover {
      cursor: pointer;
      font-size: 20px;
    }
  }
}
/deep/.el-table td {
  padding: 0;
}
/deep/.el-table th {
  padding: 0;
}
.footer-bottom {
  // position: fixed;
  // right: 20px;
  // bottom: 20px;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
</style>